<template>
	<view class="qk_building_body">
	    <image class="qk_building_banner" src="../../static/image/building_1.png"/>
	    <view class="qk_building_block">
	        <view class="qk_building_title">福州悦江湾（备案名：荣泰小区）</view>
	        <view class="qk_building_tips">
	            <text>纯住宅</text>
	            <text>学区房</text>
	        </view>
			<view class="qk_building_price">
				<view class="qk_building_price_text">
					约28889元/m<text class="qk_index_pow">2</text>
				</view>
				<view class="qk_building_price_desc">参考均价</view>
			</view>
	        <view class="qk_building_base_infos">
	            <view class="qk_building_base_info">
	                <view class="qk_building_base_info_label">占地面积</view>
	                <view class="qk_building_base_info_value">
						<text>90815m<text class="qk_index_pow">2</text></text>
					</view>
	            </view>
	            <view class="qk_building_base_info">
	                <view class="qk_building_base_info_label">开盘时间</view>
	                <view class="qk_building_base_info_value">2020-10-03</view>
	            </view>
	            <view class="qk_building_base_info">
	                <view class="qk_building_base_info_label">产品类型</view>
	                <view class="qk_building_base_info_value">住宅</view>
	            </view>
	            <view class="qk_building_base_info">
	                <view class="qk_building_base_info_label">楼盘地址</view>
	                <view class="qk_building_base_info_value">鼓楼区工业路福大东门对面</view>
					<view class="qk_building_base_info_showmap"></view>
	            </view>
	        </view>
			<view class="qk_building_moreInfo">查看详细介绍</view>
	    </view>
		
		<view class="qk_building_block">
		    <view class="qk_building_block_title">购房优惠</view>
		    <view class="qk_building_block_ctn">
		        <view class="activeItem">
		        	<view class="activeItem_l">
		        		<view class="activeItem_l_a">万象城云玺新品登临【优惠券】</view>
		        		<view class="activeItem_l_b">福州万象城</view>
		        		<view class="activeItem_l_b">有效期至2020年08月31日</view>
		        	</view>
		        	<view class="activeItem_r">
		        		<view class="activeItem_r_btn">领取</view>
		        	</view>
		        </view>
		    </view>
			<view class="qk_building_block_title">热门活动</view>
			<view class="qk_building_block_ctn">
				<view class="qk_building_block_active">
					<image src="../../static/image/index_banner.png" mode="widthFix"></image>
					<view class="qk_building_block_active_desc">"乐吃不皮"网红美食节</view>
				</view>
			</view>
		</view>
		
		
		
		
	    
	    <view class="qk_building_block">
	        <view class="qk_building_block_title">户型介绍</view>
			<view class="qk_houseList_house_list">
				<view class="qk_houseList_house_list_l">
					<image src="" mode="" />
					<view class="qk_houseList_house_list_l_title">D户型</view>
				</view>
				<view class="qk_houseList_house_list_r">
					<view class="qk_houseList_house_list_title">
						<text>3室2厅2卫</text>
						<text>建面约122.00m<text class="qk_index_pow">2</text></text>
					</view>
					<view class="qk_houseList_house_list_price">102.1万/套起</view>
					<view class="qk_houseList_house_list_tips">
						<text>户型方正</text><text>南北通透</text>
					</view>
				</view>
			</view>
			<view class="qk_houseList_house_list">
				<view class="qk_houseList_house_list_l">
					<image src="" mode="" />
					<view class="qk_houseList_house_list_l_title">A1户型</view>
				</view>
				<view class="qk_houseList_house_list_r">
					<view class="qk_houseList_house_list_title">
						<text>3室2厅2卫</text>
						<text>建面约140.00m<text class="qk_index_pow">2</text></text>
					</view>
					<view class="qk_houseList_house_list_price">105.6万/套起</view>
					<view class="qk_houseList_house_list_tips">
						<text>南北通透</text><text>全明户型</text>
					</view>
				</view>
			</view>
			<view class="qk_houseList_house_showMore">更多户型<uni-icons type="arrowdown" size="15"></uni-icons></view>
	    </view>
	    <view class="qk_building_block">
	        <view class="qk_building_block_title">交通配套</view>
	        <view class="qk_building_block_ctn">
	            <map style="width: 100%; height: 150px;" latitude="39.909" longitude="116.39742"></map>
				<view class="qk_building_block_ctn_main">
					【交通】 项目北靠北环路，南临盐什公路，西连雁白黄河大桥，东连雁青大桥（规划中）目前已开通150、151路公交路线\n【商业】 项目二期璀璨天宸拥有完善的商业配套，小区商业街位于二期6、7号地块的北侧，拥有丰富的配套业态，并且未来将打造超5万平米的大型商业综合体，内部设有大型购物中心、星级酒店、高端公寓，写字楼、巨幕影院等，为小区业主及周边高端客户群体提供休闲购物的娱乐场所。\n【学校】 项目引驻甘肃省优质教育资源，独家签约城关区保育院、水车园小学、西北师大附中等名校教育。目前水车园小学银河分校已招生开学，银河居住区与城关区保育院（筹建中）、西北师大附中（筹建中）\n【医疗】 项目位于城关区青白石区域，项目周边有万达商圈、大润发商圈、周边各大银行、医院、学校、公园等丰盛配套环伺，医疗资源齐全。
				</view>
	        </view>
	    </view>
	    <view class="qk_building_block">
	        <view class="qk_building_block_title">房源相册</view>
	        <view class="qk_building_images_box">
	            <view class="qk_building_images">
					<view class="qk_building_image"><image src="" /></view>
					<view class="qk_building_image"><image src="" /></view>
					<view class="qk_building_image"><image src="" /></view>
	            </view>
	        </view>
	    </view>
	    <view class="qk_building_mzsm">免责声明：本宣传资料仅作为要约邀请，资料的内容旨在提供相关信息，不作为销售承诺和合同附件，买卖双方的权利义务以政府最后批文及签约文件为准。
	    </view>
	    <view class="qk_building_toolbar">
	        <button class="qk_building_toolbar_l" open-type="share">
	            <view class="iconfont icon-forward"></view>
	            <view>转发好友</view>
	        </button>
	        <view class="qk_building_toolbar_r">
				<view class="qk_building_toolbar_r_btn btn_yellow" @click="showPop">开盘提醒</view>
				<view class="qk_building_toolbar_r_btn">我要咨询</view>
			</view>
	    </view>
		<view class="qk_support_footer">
			<image src="../../static/image/crIcon1.png" mode="aspectFit"></image>
		</view>
		<view class="qk_return_btn">返回楼盘</view>
		<view class="qk_buliding_pop" v-if="isShowPop">
			<view class="qk_buliding_pop_mask" @click="hidePop"></view>
			<view class="qk_buliding_pop_main">
				<view class="qk_buliding_pop_title">获取开盘通知</view>
				<view class="qk_buliding_pop_slogen">抢占买房先机，开盘消息第一时间通知您</view>
				<view class="qk_buliding_pop_ctn">
					<input />
					<input placeholder="请授权手机号码" placeholder-class="qk_buliding_pop_ctn_inputPH"/>
				</view>
				<view class="qk_buliding_pop_btn">好的，通知我</view>
				<view class="qk_buliding_pop_close" @click="hidePop">×</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
	    components: {uniIcons},
		data(){
			return {
				isShowPop:false
			}
		},
		methods:{
			showPop(){
				this.isShowPop=true;
			},
			hidePop(){
				this.isShowPop=false;
			}
		}
	}
</script>

<style>
	.qk_building_body{
	    padding:0 0rpx 400rpx;
		background-color: #f6f5f8;
		position: relative;
	}
	.qk_building_banner{
	    width: 100%;
	    height:48vw;
	}
	.qk_building_block{
	    margin-bottom:20rpx;
	    padding: 30rpx 30rpx 40rpx;
	    background-color: #fff;
	}
	.qk_building_title{
	    line-height: 40rpx;
	    padding: 15rpx 0;
	    margin-top:10rpx;
	    font-size: 40rpx;
	}
	.qk_building_tips{
	    padding: 20rpx 0;
	}
	.qk_building_tips:after{
	    content: "";
	    display: block;
	    clear: both;
	}
	.qk_building_tips text{
	    float: left;
	    height:42rpx;
	    line-height: 42rpx;
	    padding: 0 20rpx;
	    color: #999;
	    font-size: 20rpx;
	    background-color: #F5F5F5;
	    border-radius: 10rpx;
	}
	.qk_building_tips text+text{
	    margin-left: 10rpx;
	}
	.qk_building_price{
		padding-top: 20rpx;
	}
	.qk_building_price_text{
		color: #FF4A19;
		font-size: 50rpx;
	}
	.qk_building_price_desc{
		font-size: 22rpx;
		color:#999;
	}
	.qk_building_base_infos{
	    margin:50rpx 0 100rpx;
	}
	.qk_building_base_info{
	    display: flex;
		align-items: center;
	    line-height: 66rpx;
	}
	.qk_building_base_info_label{
		width: 150rpx;
	    color:#999;
	    font-size: 28rpx;
	}
	.qk_building_base_info_value{
		flex:1;
	    color: #333;
	    font-size: 28rpx;
	    font-weight: bold;
	}
	.qk_building_base_info_showmap{
		height:80rpx;
		width:80rpx;
		background: url(../../static/image/map.png) no-repeat;
		background-size: 100%;
		margin:0 50rpx 0 10rpx;
	}
	.qk_building_moreInfo{
		width: 687rpx;
		height:88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #f7f7f7;
		color: #333;
		font-size: 32rpx;
		margin:auto;
		border-radius: 44rpx;
	}
	.qk_building_block_title{
		padding-top: 15rpx;
	    line-height: 80rpx;
	    font-size: 32rpx;
	    font-weight: bold;
	}
	.qk_building_block_ctn{
	    line-height: 44rpx;
	    font-size: 28rpx;
	    padding: 20rpx 0;
	}
	.qk_building_block_active image{
		width: 50%;
	}
	.qk_building_block_active_desc{
		font-size: 20rpx;
		color:#aaa;
		line-height: 40rpx;
	}
	.qk_houseList_house_showMore{
		height:56rpx;
		line-height: 90rpx;
		font-size: 22rpx;
		color: #aaa;
		text-align: center;
	}
	.qk_houseList_house_showMore .uni-icons{
		color: #aaa!important;
		vertical-align: middle;
	}
	.qk_building_block_ctn_main{
		padding-top: 80rpx;
	}
	.qk_building_images_box{
	    position: relative;
	    overflow-x: auto;
	    height:240rpx;
	}
	.qk_building_images{
	    display: flex;
	    padding: 20rpx;
	    position: absolute;
	    top:0;
	    left:0;
	}
	.qk_building_image{
	  width:300rpx;
	  height:200rpx;
	  white-space: nowrap;
	}
	.qk_building_image+.qk_building_image{
	  margin-left:30rpx;
	}
	.qk_building_image image{
	  width: 100%;
	  height:200rpx;
	}
	.qk_support_footer{
		bottom:140rpx;
	}
	.qk_building_mzsm{
		padding: 0 34rpx;
		line-height: 34rpx;
		font-size: 18rpx;
		color: #8D8D8D;
	}
	.qk_building_toolbar_r{
		display: flex;
		align-items: center;
		background-color: unset;
	}
	.qk_building_toolbar_r_btn{
		flex: 1;
		margin:0 10rpx;
		background-color: #478EF7;
		border-radius: 10rpx;
	}
	.btn_yellow{
		background-color: #FFA841;
	}
	.qk_buliding_pop{
		height:100vh;
		position: fixed;
		width: 100%;
		top:0;
		z-index: 100;
	}
	.qk_buliding_pop_mask{
		height:100vh;
		position: fixed;
		width: 100%;
		top:0;
		background-color: rgba(0,0,0,0.5);
	}
	.qk_buliding_pop_main{
		height:60%;
		min-height: 350rpx;
		width: 90%;
		position: absolute;
		top:180rpx;
		left:0;
		right:0;
		margin:auto;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.qk_buliding_pop_title{
		font-size: 40rpx;
		color: #498ff8;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		font-weight: bold;
	}
	.qk_buliding_pop_slogen{
		font-size: 28rpx;
		color: #7a8ca7;
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
	}
	.qk_buliding_pop_ctn{
		padding: 20rpx 0;
	}
	.qk_buliding_pop_ctn input{
		background-color: #e9e9e9;
		height:88rpx;
		line-height:88rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		width: 100%;
		margin:20rpx auto 40rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
	.qk_buliding_pop_ctn_inputPH{
		color: #ccc;
	}
	.qk_buliding_pop_btn{
		position: absolute;
		bottom:40rpx;
		left:0;
		right:0;
		margin:auto;
		height:88rpx;
		line-height:88rpx;
		width: calc(100% - 80rpx);
		border-radius: 10rpx;
		background-color: #498ff8;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
	}
	.qk_buliding_pop_close{
		position: absolute;
		height:80rpx;
		width:80rpx;
		line-height:80rpx;
		text-align: center;
		font-size: 56rpx;
		color: #999;
		top:0;
		right:0;
	}
</style>
